<template>
  <div class="home-header w-full flex">
    <div class="left mr-20 flex-1 flex overflow-hidden">
      <div class="item flex-1 mr-20  park-num flex-column flex-center">
        <div class="title">车场总数(个)</div>
        <div class="num">{{ total }}</div>
        <div class="tip">今日新增 {{ headerInfo.enterCount || 0 }}</div>
      </div>
      <div class="item flex-1  enter-num flex-column flex-center">
        <div class="title">今日进场车辆(辆)</div>
        <div class="num">{{ headerInfo.exitCount || 0 }}</div>
      </div>
    </div>
    <div class="right flex-1 flex">
      <div class="flex-1 header-pay flex align-center item">
        <div class="flex-1 flex align-center">
          <img src="@/assets/images/home/home-4.png" alt="icon">
          <div class="ml-20">
            <div class="title">今日总收入(元)</div>
            <div class="num">{{ payInfo.amountTotal }}</div>
            <div class="yestorday">
              <span>比昨日</span>
              <span v-if="payInfo.rate > 0" class="compare">+{{ payInfo.rate }}% <i class="el-icon-top"></i></span>
              <span v-else class="compare">{{ payInfo.rate }}% <i class="el-icon-bottom"></i></span>
            </div>
          </div>
        </div>
        <div class="cash mr-10 flex-column flex-between">
          <div class="flex-between align-center">
            <div class="s-title mr-10">自营车场收入(元)</div>
            <div class="s-num">{{ payInfo.selfTotal }}</div>
          </div>
          <div class="flex-between align-center">
            <div class="s-title mr-10">社会车场收入(元)</div>
            <div class="s-num">{{ payInfo.societyTotal }}</div>
          </div>
        </div>
        <div class="line flex align-center">
          <div class="mr-20">
            <div class="s-title">线上支付(元)</div>
            <div class="s-num">{{ payInfo.onlineTotal }}</div>
          </div>
          <div class="flex-1 flex">
            <div>
              <div class="mr-10">
                <span class="label">微信:</span>
                <span class="value">{{ payInfo.wechatTotal }}</span>
              </div>
              <div class="mr-10">
                <span class="label">网银支付:</span>
                <span class="value">{{ payInfo.bankTotal }}</span>
              </div>
            </div>
            <div>
              <div>
                <span class="label">支付宝:</span>
                <span class="value">{{ payInfo.alipayTotal }}</span>
              </div>
              <div>
                <span class="label">其他:</span>
                <span class="value">{{ payInfo.otherTotal }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Home from '@/services/home.js'
import Parking from '@/services/parking-list.js'
export default {
  data () {
    return {
      headerInfo: {},
      total: 0,
      payInfo: {}
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      Promise.all([
        Home.enterAndExitStatistic(),
        Home.totalIncome(),
        Parking.ParkingList({pageNum: 1, pageSize: 9999, isOperate: 1}),
      ]).then(([res1,
        res2,
        res3,]) => {
        console.log('🚀 ~ init ~ res2:', res2)
        this.headerInfo = res1.data
        this.payInfo = res2.data
        this.total = res3.total
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.home-header{
  height: 140px;
  .item{
    width: 408px;
    background: var(--color-white);
    padding: 0 40px;
    .title{
      font-size: 14px;
      font-weight: 400;
      line-height: 19.6px;
    }
    .num{
      font-size: 24px;
      font-weight: 500;
      line-height: 33.6px;
    }
    .tip{
      font-size: 12px;
      font-weight: 300;
      line-height: 16.8px;
    }
  }
  .park-num{
    background: url('~@/assets/images/home/home-1.png') no-repeat;
    background-size: 100% 100%;
  }
  .enter-num{
    background: url('~@/assets/images/home/home-2.png') no-repeat;
    background-size: 100% 100%;
  }
  .header-pay {
    padding: 0 20px;
    background: var(--color-white);
    .cash{
      min-width: 206px;
      height: 89px;
      background: #F56D6E1A;
      padding: 15px 10px;
    }
    .line{
      max-width: 368px;
      min-width: 348px;
      height: 89px;
      background: #F7AD4F1A;
      padding: 0 20px;
    }
    img{
      width: 60px;
      height: 60px;
    }
    .yestorday{
      font-size: 12px;
      font-weight: 300;
      line-height: 20px;
    }
    .compare{
      color: #FF1414;
      margin-left: 3px;
    }
    .el-icon-top{
      position: relative;
      left: -4px;
      top: 1px;
    }
    .s-title{
      font-size: 14px;
      font-weight: 400;
      line-height: 19.6px;
    }
    .s-num{
      font-size: 19px;
      font-weight: 500;
      line-height: 26.6px;
    }
    .label,.value{
      font-size: 12px;
      font-weight: 300;
      line-height: 21.8px;
    }
    .label{
      display: inline-block;
      min-width: 50px;
      text-align: right;
      margin-right: 8px;
    }
  }
}
.gird{
  width: 20px;
}
</style>

